<template>
    <div id="content">
        <div class="sidebar">
            <span style="font-size: 50px;">servers</span><br>
        </div>
        <div id="servers_content" class="sidebar">
            <div class="add_input">
                <div class="ip_addr_input">
                    <input type="number" max="255" min="0" v-model="ip[0]">
                    <input type="number" max="255" min="0" v-model="ip[1]">
                    <input type="number" max="255" min="0" v-model="ip[2]">
                    <input type="number" max="255" min="0" v-model="ip[3]">
                    <input type="number" max="65535" min="0" v-model="port">
                    <button @click.stop="add_server()">添加</button>
                    <button @click.stop="get_servers()">刷新</button>
                </div>
                <button @click.stop="delete_server()">删除不可用服务</button>
            </div>
            <div class="server_info">
                <table>
                    <thead>
                        <tr><th style="width: 342.4px;">status</th><th style="width: 342.4px;">addr</th><th style="width: 342.4px;">model_name</th><th style="width: 342.4px;">input_shape</th><th style="width: 342.4px;">output_shape</th></tr>
                    </thead>
                </table>
                <div class="server_info_content">
                    <table>
                        <tbody>
                            <tr v-for="server in serverList" :class="{unit_active: server.status}"><td style="width: 342.4px;">{{server.status}}</td><td style="width: 342.4px;">{{server.addr}}</td><td style="width: 342.4px;">{{server.model_name}}</td><td style="width: 342.4px;">{{server.input_shape}}</td><td style="width: 342.4px;">{{server.output_shape}}</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
        </div>
    </div>
</template>
<script>

import axios from 'axios';

export default{
    data(){
        return{
            serverList:[],
            ip:[0,0,0,0],
            port:0,
            addr:""
        }
    },
    inject:["need_wait","neednt_wait","set_err"],
    methods:{
        get_servers(){
            this.need_wait()
            axios.get("/servers")
                .then( (response) =>{
                    this.serverList = response.data.data
                    this.set_err(response.data.err)
                    this.neednt_wait()
                })
                .catch((error)=> {
                    this.set_err(error);
                });
        },
        add_server(){
            this.need_wait()
            this.addr = `${this.ip[0]}.${this.ip[1]}.${this.ip[2]}.${this.ip[2]}:${this.port}`
            console.log(this.addr)
            axios.post("/servers/add",{addr:this.addr})
                .then( (response) =>{
                    this.serverList = response.data.data
                    this.set_err(response.data.err)
                    this.neednt_wait()
                })
                .catch((error)=> {
                    this.set_err(error);
                });
        },
        delete_server(){
            this.need_wait()
            axios.get("/servers/delete")
                .then( (response) =>{
                    this.serverList = response.data.data
                    this.set_err(response.data.err)
                    this.neednt_wait()
                })
                .catch((error)=> {
                    this.set_err(error);
                });
        }
    },
    mounted(){
        this.get_servers()
    }
}
</script>
<style scoped>
/* 只在 webkit 核心的浏览器中有效，例如 Chrome、新 Edge、Safari 等。 */
::-webkit-scrollbar {
  display: none;
}
.sidebar{
    border-style: solid;
    border-color: black;
}
#servers_content{
    font-size: 25px;
    border-style: solid;
    border-color: rebeccapurple;
    height: 750px;
}
.server_info{
    margin-top: 5px;
}
.server_info_content{
    overflow-y: auto;
    height: 640px;
}
.ip_addr_input{
    margin-bottom: 5px;
}
th,td{
    border-style: solid;
    border-color: black;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
}
input{
    width: 60px;
    font-size: 20px;
}
button{
    height: 29px;
    font-size: 20px;
}
</style>